window.onload = function(){
  Vue.createApp({
    data(){
      return{
        items:[
          {
            name:"首页",
            yname:"Home"
          },
          {
            name:"关于红岩",
            yname:"HongYan",
            introduce:[
              {name:"红岩文化"},
              {name:"博物馆机构"},
              {name:"历史沿革"}
            ]
          },
          {
            name:"公告动态",
            yname:"Dynamics",
            introduce:[
              {name:"文博信息"},
              {name:"政务平台"},
              {name:"公告"},
              {name:"专题报道"}
            ]
          },
          {
            name:"馆藏精品",
            yname:"Collections",
            introduce:[
              {name:"一级文物"},
              {name:"二级文物"},
              {name:"三级文物"}
            ]
          },
          {
            name:"陈列展览",
            yname:"Exhibition",
            introduce:[
              {name:"虚拟展览"},
              {name:"基本陈列"},
              {name:"复原陈列"},
              {name:"临时展览"},
              {name:"展览交流"},
            ]
          },
          {
            name:"研究开发",
            yname:"Research",
            introduce:[
              {name:"历史研究"},
              {name:"艺术创作"},
              {name:"影视在线"},
              {name:"文创产品"}
            ]
          },
          {
            name:"公共教育",
            yname:"Education",
            introduce:[
              {name:"党性教育"},
              {name:"爱国主义教育"},
              {name:"研学实践教育"},
              {name:"科普教育"}
            ]
          },
          {
            name:"参观服务",
            yname:"Service",
            introduce:[
              {name:"景点介绍"},
              {name:"服务内容"},
              {name:"网上预约"},
              {name:"志愿服务"}
            ]
          },
          {
            name:"网上预约",
            yname:"Reservation"
          }
        ]
      }
    }
  }).mount("#nav")
  let lis = document.querySelectorAll(".li-item");
  let secnavs = document.querySelectorAll(".nav-sec");
  for (let i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function () {
      // console.log(lis[i].firstElementChild);
      // 默认首页的背景
      lis[0].firstElementChild.className = "on"
      lis[i].firstElementChild.className = "on"
      secnavs[i].style.display = "block"
    }
    lis[i].onmouseout = function () {
      lis[i].firstElementChild.className = " "
      // 默认首页的背景
      lis[0].firstElementChild.className = "on"
      secnavs[i].style.display = "none"
    }
  }
}
